<template>
    <div class="add_address bg_colorff p_l30 m_t20">
      <div class="flex border_b p_r30 line90 font_size32 color_33">
        <div class="lable">收货人</div>
        <div><input v-model="username" class="font_size32" type="text" maxlength="10" placeholder="输入收货人"/></div>
      </div>
      <div class="flex border_b p_r30 line90 font_size32 color_33">
        <div class="lable">联系电话</div>
        <div><input v-model="userphone" class="font_size32" type="text" maxlength="11" placeholder="请输入联系电话"/></div>
      </div>
      <div class="flex border_b p_r30 line90 font_size32 ">
        <div class="flex-1 color_33">选择省/市/县</div>
        <div @click="clickCityFn"><span class="color_99" v-if="!province_src && !pccinfo">请选择</span><span v-if="!province_src">{{pccinfo}}</span><span v-if="province_src">{{province_src}}{{city_src}}{{country_src}}</span><img class="left_icon" src="../../assets/img/icon/jiantou_left.png"/></div>
      </div>
      <div class="addreinfo  color_33">
        <div class="font_size32">详细地址</div>
        <div><input v-model="addressinfo" class="line90 font_size32" type="text" placeholder="请输入详细地址：例如街道/楼牌等" /></div>
      </div>
      <city-link v-if="regionVisible"></city-link>

      <div class="keepbtn" @click="keepFn(add_id)"><span v-if="add_id">修改</span><span v-if="!add_id">保存</span></div>
    </div>
</template>

<script>
  import CityLink from "../../components/city/cityLinkpage";
    export default {
      name: "addaddress",
      data(){
          return{
            regionVisible: false,
            username: '',
            userphone: '',
            pccinfo: '',
            addressinfo: '',
            add_id: '',
            is_default:'',
            p_id: '',
            cy_id: '',
            ct_id:''
          }
      },
      components: {CityLink},

      computed:{
        province_src(){
          return this.$store.state.addressinfo.province
        },
        city_src(){
          return this.$store.state.addressinfo.city
        },
        country_src(){
          return this.$store.state.addressinfo.country
        },
        province_id(){
          return this.$store.state.addressinfo.province_id
        },
        city_id(){
          return this.$store.state.addressinfo.city_id
        },
        country_id(){
          return this.$store.state.addressinfo.country_id
        }
      },
      created(){
        console.log(this.$route.query)
        if(this.$route.query.id){
          this.add_id = this.$route.query.id
          this.getaddinfoFn(this.add_id)
        }
      },
      methods: {
        clickCityFn(){
          this.regionVisible = !this.regionVisible
        },
        getaddinfoFn(id){
          var self = this
          self.$util.get('address/getAddressDetail',{
            uid: self.$store.state.userinfo.uid,
            id: self.add_id,
          }).then(data => {
            if(data.status == 1) {
                self.add_id = data.data.id
                self.username = data.data.real_name
                self.userphone = data.data.mobile
                // self.province_id = data.data.province_id
                // self.city_id = data.data.city_id
                // self.country_id = data.data.district_id
                self.p_id = data.data.province_id,
                self.cy_id = data.data.city_id,
                self.ct_id = data.data.district_id
                self.pccinfo =  data.data.detail
                self.addressinfo = data.data.address
                self.is_default = data.data.is_default
              console.log(data)
              console.log(data.data.province_id)
            }
          })
        },
        keepFn(id){
          var self = this
          if(!self.username){
            this.$toast('请输入收货人')
            return
          }
          var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
          if(!self.userphone){
            this.$toast('请输入联系电话')
            return
          }
          if(!myreg.test(self.userphone)){
            this.$toast('请输入正确的电话号码')
            return
          }
          console.log(self.pccinfo)
          if(!self.province_src && !self.pccinfo){
            this.$toast('请选择城市')
            return
          }
          if(!self.addressinfo){
            this.$toast('请输入详细地址')
            return
          }

          console.log(this.province_id)

          if(id){
            var pid,cid,ctid
            if(self.province_id ){
              pid = self.province_id,
              cid = self.city_id,
              ctid = self.country_id
            } else {
              console.log(ctid)
              pid = self.p_id,
              cid = self.cy_id,
              ctid = self.ct_id
            }

            this.$util.post('address/updateUserAddress',{
              id: id,
              uid: self.$store.state.userinfo.uid,
              real_name: self.username,
              mobile: self.userphone,
              province_id: pid,
              city_id: cid,
              district_id: ctid,
              address: self.addressinfo,
              is_default: 0
            }).then(data => {
              if(data.status == 1){
                this.$toast('修改成功')
                this.$store.commit('setaddressinfo', '')
                this.$router.push('/address')
              } else {
                this.$toast(data.message)
              }

            })
          } else {
            this.$util.post('address/saveUserAddress',{
              uid: self.$store.state.userinfo.uid,
              real_name: self.username,
              mobile: self.userphone,
              province_id: self.province_id,
              city_id: self.city_id,
              district_id: self.country_id,
              address: self.addressinfo,
              is_default: 0
            }).then(data => {
              if(data.status == 1){
                this.$toast('添加成功')
                this.$store.commit('setaddressinfo', '')
                this.$router.push('/address')
              } else {
                this.$toast(data.message)
              }

            })
          }


        }
      }
    }
</script>
<style lang="less" scoped>
  @import "../../assets/css/public.less";
  @import "../../assets/css/center/addaddress";
</style>
